<!DOCTYPE html>
<html>
<head>
    <title>医院门诊系统</title>
    <!-- 避免中文乱码 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 引入 Bootstrap -->
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
            integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
            crossorigin="anonymous"></script>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
          integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
    <!-- 引入 toastr -->
    <script src="../../toastr/toastr.js"></script>
    <link rel="stylesheet" href="../../toastr/toastr.css">
</head>
<script type="text/javascript">
    //设置toastr样式
    toastr.options.positionClass = 'toast-bottom-center';
    //进入页面时加载病例库数据
    $(document).ready(function () {
        $.ajax({
            url: "showcase",
            type: 'GET',
            dataType: 'json',
            success: function (data) {
                for (let i = 0; i < data.length; i++) {
                    var c_idTd = $("<td></td>").append(data[i].case_id);
                    var p_nameTd = $("<td></td>").append(data[i].patients_name);
                    var conditionTd = $("<td></td>").append(data[i].case_condition);
                    var d_nameTd = $("<td></td>").append(data[i].doctor_name);
                    var d_idTd = $("<td></td>").append(data[i].doctor_id);
                    var dateTd = $("<td></td>").append(data[i].date);
                    var modalTd = $(`<td><button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#myModal\" data-whatever=${data[i].case_id}>开药</button></td>`)
                    var tr = $("<tr></tr>").append(c_idTd).append(p_nameTd).append(conditionTd)
                        .append(d_nameTd).append(d_idTd).append(dateTd).append(modalTd);
                    $("#allcase").append(tr);
                }
            }
        })
        //按ID查询病例
        $("#search").keydown(function (event) {
            if (event.keyCode === 13) {
                $.ajax({
                    url: "searchcase",
                    type: 'GET',
                    data: {
                        case_id: $("#search").val()
                    },
                    dataType: 'json',
                    success: function (result) {
                        $("#searchresult").empty();
                        $("#allcase").empty();
                        console.log(result);
                        for (let i = 0; i < result.length; i++) {
                            var c_idTd = $("<td></td>").append(result[i].case_id);
                            var p_nameTd = $("<td></td>").append(result[i].patients_name);
                            var conditionTd = $("<td></td>").append(result[i].case_condition);
                            var d_nameTd = $("<td></td>").append(result[i].doctor_name);
                            var d_idTd = $("<td></td>").append(result[i].doctor_id);
                            var dateTd = $("<td></td>").append(result[i].date);
                            var modalTd = $(`<td><button type=\"button\" class=\"btn btn-primary\" data-toggle=\"modal\" data-target=\"#myModal\" data-whatever=${result[i].case_id}>开药</button></td>`)
                            var tr = $("<tr></tr>").append(c_idTd).append(p_nameTd).append(conditionTd)
                                .append(d_nameTd).append(d_idTd).append(dateTd).append(modalTd);
                            $("#searchresult").append(tr);
                        }
                    }
                })
            }
        });
        //开药
        $("#addprescribe").click(function (){
            var selectOp = $("#specificationOp option:selected");
            if($("#medicine_name").val() === "" || $("#num").val() === "" || selectOp.val() === ""){
                toastr.error("请检查信息是否完整");
            }
            else{
                $.ajax({
                    url:"/prescribe/addprescribe",
                    type:"post",
                    contentType:"application/json;charset=UTF-8",
                    dataType:"json",
                    data:JSON.stringify({
                        case_id:$("#case_id").val(),
                        medicine_name:$("#medicine_name").val(),
                        specification:selectOp.val(),
                        num:$("#num").val(),
                    }),
                    success:function (flag){
                        if(flag>0) {
                            $("#medicine_name").val("");
                            $("#specificationOp").empty();
                            $("#num").val("");
                            toastr.success("开药成功");
                        }
                        else{
                            toastr.error("开药失败");
                        }
                    }
                })
            }
        })
        //键入药品名称查询药品表
        $("#medicine_name").blur(function (){
            $("#specificationOp").empty();
            $.ajax({
                url:"/prescribe/searchmedicine",
                type:"post",
                contentType:"application/json;charset=UTF-8",
                dataType:"json",
                data:JSON.stringify({
                    medicine_name:$("#medicine_name").val(),
                }),
                success:function (medicines){
                    for(let j = 0;j < medicines.length;j++){
                        var newOp= $(`<option value=${medicines[j].specification}></option>`).append(medicines[j].specification);
                        $("#specificationOp").append(newOp);
                    }
                }
            })
        })
        //绑定模态框中的case_id
        $('#myModal').on('show.bs.modal', function (event) {
            var button = $(event.relatedTarget) // 触发事件的按钮
            var recipient = button.data('whatever') // 解析出whatever内容
            $("#case_id").val(recipient)
        })
    })

</script>
<body>
<!-- 导航栏 -->
<nav class="navbar navbar-expand-sm bg-primary navbar-dark">
    <ul class="navbar-nav">
        <li class="nav-item">
            <a class="nav-link" href="/tohome" style="font-size:20px">首页</a>
        </li>
        <li class="nav-item active">
            <a class="nav-link" href="tocase" style="font-size:20px">病例库</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="toaddcase" style="font-size:20px">录入病例</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" href="/prescribe/toprescribe" style="font-size:20px">开药记录</a>
        </li>
    </ul>
</nav>
<form class="m-3">
    <!-- 搜索栏 -->
    <div class="form-group">
        <div class="input-group w-25 ">
            <span class="input-group-text" id="searchIcon">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-search"
                     viewBox="0 0 16 16">
                    <path d="M11.742 10.344a6.5 6.5 0 1 0-1.397 1.398h-.001c.03.04.062.078.098.115l3.85 3.85a1 1 0 0 0 1.415-1.414l-3.85-3.85a1.007 1.007 0 0 0-.115-.1zM12 6.5a5.5 5.5 0 1 1-11 0 5.5 5.5 0 0 1 11 0z"></path>
                </svg>
            </span>
            <input type="text" class="form-control" placeholder="输入病例ID搜索" id="search">
        </div>
    </div>
    <!-- 表格 -->
    <div class="panel-footer" style="height: 490px;overflow: auto;">
    <div class="form-group">
        <table class="table table-hover">
            <thead class="thead-light">
            <tr>
                <th>病例号</th>
                <th>病人姓名</th>
                <th>病情描述</th>
                <th>医生姓名</th>
                <th>医生编号</th>
                <th>日期</th>
                <th></th>
            </tr>
            </thead>
            <!-- 显示所有病例 -->
            <tbody id="allcase">
            </tbody>
            <!-- 显示搜索结果 -->
            <tbody id="searchresult">
            </tbody>
        </table>
    </div>
    </div>
    <!-- 避免提交表单 -->
    <input type="text" id="hiddenText" name="hiddenText" style="display:none"/>
</form>
<!-- 模态框 -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">

            <div class="btn-primary modal-header">
                <!--  关闭按钮  -->
                <button type="button" class="close" data-dismiss="modal">&times;</button>
            </div>

            <div class="modal-body">
                <form class="form-horizontal" role="form" id="modalform">
                    <div class="form-group">
                        <div class="col-sm-9" style="display: none">
                            <input type="text" id="case_id" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="medicine_name" class="col-sm-2 control-label">药品名称</label>
                        <div class="col-sm-9">
                            <input type="text" id="medicine_name" class="form-control"/>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="specificationOp" class="col-sm-2 control-label">药品规格</label>
                        <div class="col-sm-9">
                            <select class="form-control" id="specificationOp">
                                <!-- 动态拼接选项 -->
                            </select>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="num" class="col-sm-2 control-label">开药量</label>
                        <div class="col-sm-9">
                            <input type="text" id="num" class="form-control"/>
                        </div>
                    </div>
                </form>
            </div>

            <div class="modal-footer">
                <button type="button" id="addprescribe" class="btn btn-primary">提交</button>
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
            </div>
        </div><!-- /.modal-content -->
    </div>
</div> <!-- /.modal -->
</body>
</html>
